<script setup lang="ts">
import { ref } from "vue";
const email = ref('')
const emailEmpty = ref(false);
const successStatus= ref(false)
const jumpToNext = ()=>{
if (email.value.trim()==='') {
  emailEmpty.value = true
  return 
}
successStatus.value=true
}
</script>

<template>
  <div class="forgottenPassword-page index-content">
    <div class="flex items-center justify-center px-2.5 md:px-6 h-screen">
      <div class="w-full max-w-xl text-center">
        <div class="mb-14">
          <div>
            <b class="mb-10 block text-xl font-bold"> FileQX </b>
          </div>
          <h1 class="mb-0.5 text-3xl font-extrabold md:text-4xl">{{successStatus?'谢谢！':'忘记密码？'}}</h1>
          <h2 class="text-xl font-normal md:text-2xl">{{successStatus?'我们已将您的密码重置链接通过电子邮件发送给您！':'使用您的电子邮件获取重置链接'}}</h2>
        </div>
        <form v-if="!successStatus" class="mb-12 items-start space-y-4 md:flex md:space-x-4 md:space-y-0">
          <div class="relative w-full text-left">
            <input
            v-model="email"
              placeholder="输入您的电子邮件"
              type="email"
              class="input-color dark:placeholder:text-gray-600 focus-border-theme w-full appearance-none rounded-lg border border-transparent bg-light-background px-5 py-3.5 font-bold dark:bg-2x-dark-foreground"
            />
            <span v-if="emailEmpty" class="text-left text-xs text-red-600">The E-Mail field is required</span>
          </div>
          <button
          @click="jumpToNext"
            class="btn-border group mx-auto inline-block flex items-center whitespace-nowrap rounded-lg border-2 border-black px-7 py-2.5 dark:border-gray-300 w-full justify-center md:w-min"
          >
            <span class="pr-1 text-lg font-extrabold"> 获取链接 </span>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20px"
              height="20px"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="vue-feather text-theme -mr-1 feather feather-chevron-right"
            >
              <polyline points="9 18 15 12 9 6"></polyline>
            </svg>
          </button>
        </form>
        <span class="block">
          记得你的密码吗？
          <router-link to="/login" class="text-theme font-bold"> 登入 </router-link></span
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "@/styles/forgottenPassword.scss";
</style>
